<template>
    <view class="task-list-item-main">
        <view v-if="state == 20" class="selectdiv" @click="accountSelect">
            <view class="noselect" v-if="!data.checked"></view>
            <view class="yesselect" v-else>
                <iconsfont customIcons="icon-dagou" :color="'#ffffff'" size="24"></iconsfont>
            </view>
        </view>
        <view class="task-list-item" @click="goDetail(data.id)">
            <view class="item-header">
                <view>
                    <text class="sn-text" v-if="data.mapSendNo">车次号：{{ data.mapSendNo }}</text>
                    <text class="sn-text">销售单号：{{ data.orderNumber }}</text>
                </view>
                <text class="state-text">{{ title }}</text>
            </view>
            <address-info-card :data="data" :state="state"></address-info-card>
            <view class="item-desc">
                <view class="desc-box">
                    <text class="desc-box-label">数量：</text>
                    <text class="desc-box-value">{{ data.totalAmount || 0 }}件</text>
                </view>
                <view class="desc-box">
                    <text class="desc-box-label">重量：</text>
                    <text class="desc-box-value">{{ data.totalWeight || 0 }}kg</text>
                </view>
                <view class="go-detail flex-fill">
                    <text class="go-detail-text">详情</text>
                    <uni-icons type="arrowright"></uni-icons>
                </view>
            </view>
            <view class="item-footer" v-if="state != 4">
                <view class="item-btn" @click.stop="showTel">
                    <uni-icons class="icon-btn-tel" size="44" type="phone-filled"></uni-icons>
                    <text class="btn-text">联系</text>
                </view>
                <view class="action-bar" :class="'bg-style-' + state" @click.stop="verifySuccess">
                    <!-- <xl-slider-verify ref="verify" :forntBg="'#6B768C'" :initText="getInitText()"
						:successText="getInitText()" :sliderBlockBg="'#252C39'" @success="verifySuccess" :reset="false">
					</xl-slider-verify> -->
                    {{ getInitText() }}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import addressInfoCard from "@/pages_tms/components/order/address-info-card.vue"
import xlSliderVerify from "@/pages_tms/components/common/xl-slider-verify.vue"
import { OrderHandle } from "@/pages_tms/service/logistics.js"
import { getLocation } from "@/uni-sub-base/utils/mapUtil.js"
export default {
    components: {
        addressInfoCard,
        xlSliderVerify,
    },
    props: {
        state: {
            type: Number,
            default: 0,
        },
        data: {
            type: Object,
            default: () => {},
        },
        title: {
            type: String,
            default: "",
        },
    },
    data() {
        return {}
    },
    computed: {},
    mounted() {},
    onShow() {},
    methods: {
        goDetail(id) {
            this.easyGoTo("/pages_tms/packet/order/detail?id=" + id)
        },
        verifySuccess(e) {
            console.log(e)
            console.log(this)
            let that = this
            // setTimeout(() => {
            // 	uni.hideLoading()
            // 	that.$refs.verify.resetFn()
            // }, 1500)
            console.log("提交请求接口")
            console.log(that.state)
            let param = {}
            param.ids = that.data.id
            param.operateType = that.state
            if (that.state == 3) {
                that.easyGoTo("/pages_tms/packet/order/detail?id=" + that.data.id)
                return
            }
            uni.showLoading({
                title: "提交中",
            })
            getLocation(
                (res) => {
                    console.log(res)
                    param.location = res.longitude + "," + res.latitude
                    that.orderHandle(param)
                },
                (error) => {
                    console.log(error)
                    that.orderHandle(param)
                },
            )
            // OrderHandle(param).then(res=>{
            // 	if(res.State ===1){
            // 		uni.hideLoading()
            // 		this.easyRemoveCurrentGoTo("/pages_tms/packet/order/list?state=" + this.state)
            // 		// 删除当前项
            // 		// 更新下一个状态
            // 	}else{
            // 		uni.hideLoading()
            // 		this.easyToast(res.Msg)
            // 	}
            // })
        },
        orderHandle(param) {
            OrderHandle(param).then((res) => {
                if (res.State === 1) {
                    uni.hideLoading()
                    if (this.state == 2) {
                        this.easyRemoveCurrentGoTo("/pages_tms/packet/order/detail?id=" + this.data.id)
                    } else {
                        this.easyRemoveCurrentGoTo("/pages_tms/packet/order/list?state=" + this.state)
                    }
                    // 删除当前项
                    // 更新下一个状态
                } else {
                    uni.hideLoading()
                    this.easyToast(res.Msg)
                }
            })
        },
        getInitText() {
            let text = "点击确认提交"
            switch (this.state) {
                case 1:
                    text = "点击确认已取货"
                    break
                case 2:
                    text = "点击开始配送"
                    break
                case 3:
                    text = "点击确认已送达"
                    break
                default:
                    break
            }

            return text
        },
        showTel() {
            this.$emit("showTel", this.data)
        },
        accountSelect() {
            this.data.checked = !this.data.checked
            this.$emit("selectNum")
        },
    },
}
</script>

<style lang="scss">
.task-list-item-main {
    display: flex;
    justify-content: center;
    padding: $app-page-padding;
    background: $color-white;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
}
.task-list-item {
    flex: 1;
    .item-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: $app-page-padding;
        view {
            display: flex;
            flex-direction: column;
        }
        .sn-text {
            font-size: $font-size-28;
        }

        .state-text {
            font-size: $font-size-28;
            color: $color-tms-orange-1;
        }
    }

    .item-desc {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: $app-page-padding 0 0;

        .desc-box {
            margin-right: 20rpx;

            .desc-box-label {
                color: $app-color-text-tip;
            }
        }

        .go-detail {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;

            text {
                color: #898b9d;
            }
        }
    }

    .item-footer {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-top: $app-page-padding;
        .item-btn {
            display: flex;
            flex-direction: column;
            padding-right: 15rpx;
            padding-left: 10rpx;
            margin-right: 20rpx;

            .icon-btn-tel {
                color: #0091ff;
                margin-bottom: 10rpx;
            }

            .btn-text {
                font-size: $font-size-28;
            }
        }

        .action-bar {
            flex: 1;
            height: 100rpx;
            text-align: center;
            line-height: 100rpx;
            font-size: 38rpx;
            color: #fff;
            background: #6dd9c9;
            border-radius: 16rpx;
        }
        .bg-style-1 {
            background: #6dd9c9;
        }
        .bg-style-2 {
            background: #fe6f32;
        }
        .bg-style-3 {
            background: #4070ff;
        }
    }
}
.selectdiv {
    margin-top: 24rpx;
    margin-right: 24rpx;
}
.noselect {
    width: 36rpx;
    height: 36rpx;
    border: 2rpx solid #b2b2b2;
    border-radius: 50%;
}
.yesselect {
    width: 36rpx;
    height: 36rpx;
    background: $app-color-main;
    border: 2rpx solid $app-color-main;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
